<template>
	<el-form size="large" class="login-content-form">
		<el-form-item class="login-animation1">
			<el-input text :placeholder="$t('message.mobile.placeholder1')" v-model="state.ruleForm.phone" clearable
				autocomplete="off">
				<template #prefix>
					<i class="iconfont icon-dianhua el-input__icon"></i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation1">
			<el-input text :placeholder="$t('message.mobile.password')" :type="state.password ? 'text' : 'password'"  v-model="state.ruleForm.password" clearable
				autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
				</template>
				<template #suffix>
					<i class="iconfont el-input__icon login-content-password"
						:class="state.password ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="state.password = !state.password">
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation1">
			<el-input text :placeholder="$t('message.mobile.passwords')"  :type="state.passwords ? 'text' : 'password'" v-model="state.ruleForm.passwords" clearable
				autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
				</template>
				<template #suffix>
					<i class="iconfont el-input__icon login-content-password"
						:class="state.passwords ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="state.passwords = !state.passwords">
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2">
			<el-col :span="15">
				<el-input text maxlength="6" :placeholder="$t('message.mobile.placeholder3')"
					v-model="state.ruleForm.code" clearable autocomplete="off">
					<template #prefix>
						<el-icon class="el-input__icon"><ele-Position /></el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span="1"></el-col>
			<el-col :span="8">
				<el-button v-waves class="login-content-code" :disabled="data.isCountdownActive" @click="obtainCode()">
					{{ data.isCountdownActive ? data.countdownText : '获取验证码' }}
				</el-button>
			</el-col>
		</el-form-item>


		<el-form-item class="login-animation3">
			<el-button round type="primary" v-waves class="login-content-submit" @click="updataPassword()">
				<span>修改</span>
			</el-button>
		</el-form-item>
		<!-- <div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div> -->
	</el-form>
</template>

<script setup lang="ts" name="loginMobile">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { usePasswordApi } from '/@/api/login/password';
import { useRegisterApi } from '/@/api/login/register';
const route = useRoute();
const router = useRouter();
// 定义变量内容
const data = reactive<any>({
	isCountdownActive: false,
	countdown: 60, // 倒计时初始值，单位为秒
	countdownText: '', // 用于显示倒计时的文本
	timer: null, // 定时器ID
})
const state = reactive<any>({
	ruleForm: {
		phone: "",
		password: '',
		passwords: '',
		code: '',
	},
});


//管理端注册
const updataPassword = async () => {
	if (data.isCountdownActive) return;

	usePasswordApi().updataPassword(state.ruleForm).then(res => {

		startCountdown();
		if (res.code === 0) {
			ElMessage.error(res.msg)
		} else {
			ElMessage.success("修改成功,请登录")
			router.push('/login')
			state.ruleForm = {
				phone: "",
				password: '',
				passwords: '',
				code: '',
			}
		}
	})

}
//点击验证码的时候一分钟倒计时
const startCountdown = () => {
	data.isCountdownActive = true;
	data.countdown = 60;
	updateCountdownText();
	if (data.timer) clearInterval(data.timer);
	data.timer = setInterval(() => {
		if (data.countdown <= 0) {
			stopCountdown();
		} else {
			data.countdown--;
			updateCountdownText();
		}
	}, 1000);

}
const stopCountdown = () => {
	data.isCountdownActive = false;
	data.countdownText = ''; // 清除倒计时文本
	clearInterval(data.timer); // 清除定时器
	data.timer = null; // 重置定时器ID
}

const updateCountdownText = () => {
	data.countdownText = `${data.countdown}秒`;
}



//获取验证码
const obtainCode = async () => {
	if (data.isCountdownActive) return;
	useRegisterApi().code(state.ruleForm).then(res => {
		startCountdown();
		if (res.code === 0) {
			ElMessage.error(res.msg)
		} else {
			ElMessage.success("获取验证码成功，验证码五分钟内有效")
		}

	})
}


</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;

	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-code {
		width: 100%;
		padding: 0;
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;

	}

	.login-msg {
		color: var(--el-text-color-placeholder);
	}
}
</style>
